<template>
  <!-- 订单管理 -->
  <div class="order">
    <div class="search-handle">
      <div class="handle">
        <el-button type="danger" @click="del(check)" :disabled="!check.length">删 除</el-button>
      </div>
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="项目名称">
            <el-input v-model="query.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="项目编号">
            <el-input v-model="query.number" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="购买单位">
            <el-input v-model="query.customer_unit" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker v-model="query.addtime" type="date" placeholder="请选择" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="query.customer_phone" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">搜 索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="list">
      <el-table :data="list" style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        v-loading="loading" @selection-change="(list) => (check = list)">
        <el-table-column type="selection" width="55" />
        <el-table-column label="项目名称">
          <template #default="scope">
            <el-link type="primary" :underline="false" @click="initLook(scope.row)">{{ scope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="项目编号" />
        <el-table-column label="标书费用">
          <template #default="scope">
            <div style="color: #f40">¥ {{ scope.row.money }}</div>
          </template>
        </el-table-column>
        <el-table-column label="客户类型">
          <template #default="scope">
            <div v-text="scope.row.customer_type ? '新客户' : '老客户'"></div>
          </template>
        </el-table-column>
        <el-table-column prop="customer_unit" label="购买单位" />
        <el-table-column prop="customer_name" label="联系人" />
        <el-table-column prop="customer_phone" label="手机号" />
        <el-table-column prop="customer_email" label="Email地址" />
        <el-table-column label="中标">
          <template #default="scope">
            <el-switch v-model="scope.row.win_bid" :active-value="1" :inactive-value="0"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc" @change="changeWinBid(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="支付状态">
          <template #default="scope">
            <div v-text="scope.row.pay_state ? '已支付' : '未支付'"></div>
          </template>
        </el-table-column>
        <el-table-column label="订单号">
          <template #default="scope">
            <div v-text="scope.row.pay_state ? scope.row.pay_number : ''"></div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="addtime" label="下单时间" />

        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-link type="primary" @click="editInit(scope.row)">修 改</el-link>
            <el-link type="danger" @click="del([scope.row])">删 除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <pagination :count="page.count" :size="page.size" :current="page.current" @getPage="getPage" />
    </div>
    <!-- 修改 -->
    <el-dialog v-model="form.show" title="修改订单" width="700px" @closed="closedForm">
      <el-form ref="formList" :model="form.list" :rules="form.rules" label-width="130px">
        <el-form-item label="标书费用" prop="money">
          <el-input v-model="form.list.money" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="客户类型" prop="customer_type">
          <el-select v-model="form.list.customer_type" placeholder="请选择" clearable style="width: 100%">
            <el-option label="老客户" :value="0" />
            <el-option label="新客户" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="购买单位" prop="customer_name">
          <el-input v-model="form.list.customer_name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="客户联系人" prop="customer_unit">
          <el-input v-model="form.list.customer_unit" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="客户手机号" prop="customer_phone">
          <el-input v-model="form.list.customer_phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="客户电子邮件" prop="customer_email">
          <el-input v-model="form.list.customer_email" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="客户传真">
          <el-input v-model="form.list.customer_fax" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="营业执照" prop="business_license">
          <UploadImage @getImageList="getImagesList" :limit="1"
            :imageList="form.list.business_license ? [{ url: form.list.business_license }] : []" />
        </el-form-item>
        <el-form-item label="发票种类" prop="invoice_type">
          <el-select v-model="form.list.invoice_type" placeholder="请选择" clearable style="width: 100%">
            <el-option label="电子发票" :value="0" />
            <el-option label="纸质专票" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="发票地址、电话" prop="taxpayer_identification_number">
          <el-input v-model="form.list.invoice_address_phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="taxpayer_identification_number">
          <el-input v-model="form.list.taxpayer_identification_number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="开户行及账号" prop="invoice_bank_number">
          <el-input v-model="form.list.invoice_bank_number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="发票接收人">
          <el-input v-model="form.list.invoice_name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="发票接收地址">
          <el-input v-model="form.list.invoice_address" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="发票接收人电话">
          <el-input v-model="form.list.invoice_phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="政府">
          <el-select v-model="form.list.invoice_government" placeholder="请选择" clearable style="width: 100%">
            <el-option label="政府" :value="0" />
            <el-option label="非政府" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.list.remark" placeholder="请输入" type="textarea"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleForm">提 交</el-button>
          <el-button @click="form.show = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog v-model="look.show" title="详情" width="1000px">
      <el-descriptions border column="2">
        <el-descriptions-item label="项目名称">{{ look.list.name }}</el-descriptions-item>
        <el-descriptions-item label="项目编号">{{ look.list.number }}</el-descriptions-item>
        <el-descriptions-item label="金额">
          <span style="color: #f40">¥ {{ look.list.money }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="标书下载地址">
          <el-link type="primary" :href="look.list.path" download target="_blank" :underline="false">点击下载</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="客户类型">
          {{ look.list.customer_type ? "老客户" : "新客户" }}
        </el-descriptions-item>
        <el-descriptions-item label="购买单位">{{ look.list.customer_unit }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ look.list.customer_name }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ look.list.customer_phone }}</el-descriptions-item>
        <el-descriptions-item label="Email">{{ look.list.customer_email }}</el-descriptions-item>
        <el-descriptions-item label="传真">{{ look.list.customer_fax }}</el-descriptions-item>
        <el-descriptions-item label="营业执照">
          <ImagePreview :src="[look.list.business_license]" v-if="look.list.business_license"></ImagePreview>
        </el-descriptions-item>
        <el-descriptions-item label="发票类型">{{ look.list.invoice_type ? "纸质专票" : "电子发票" }}</el-descriptions-item>
        <el-descriptions-item label="纳税人识别号">{{ look.list.taxpayer_identification_number }}</el-descriptions-item>
        <el-descriptions-item label="发票地址、电话">{{ look.list.invoice_address_phone }}</el-descriptions-item>
        <el-descriptions-item label="开户行及账号">{{ look.list.invoice_bank_number }}</el-descriptions-item>
        <el-descriptions-item label="发票接收人">{{ look.list.invoice_name }}</el-descriptions-item>
        <el-descriptions-item label="发票接收人电话">{{ look.list.invoice_phone }}</el-descriptions-item>
        <el-descriptions-item label="发票邮寄地址">{{ look.list.invoice_address }}</el-descriptions-item>
        <el-descriptions-item label="政府">{{ look.list.invoice_government ? "政府" : "非政府" }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ look.list.addtime }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ look.list.remark }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs } from "vue";
import { getTenderOrder, delTenderOrder, handleTenderOrder, sendWinBidSms } from "@/api/tenderOrder";
import { ElMessage, ElMessageBox } from "element-plus";
import ImagePreview from "@/components/ImagePreview";
import UploadImage from "@/components/UploadImage";

let list = ref([]),
  data = reactive({
    query: {},
    page: { current: 1, size: 10, count: 0 },
  }),
  { page, query } = toRefs(data),
  loading = ref(false);

// 获取列表
function getList() {
  loading.value = true;
  getTenderOrder(data).then((res) => {
    setTimeout(() => {
      list.value = res.data;
      page.value.count = res.count;
      loading.value = false;
    }, 150);
  });
}
// 首次获取
getList();
// 分页获取
const getPage = ({ size, current }) => {
  page.value.size = size;
  page.value.current = current;
  getList();
};

// 删除
let check = ref([]);
function del(list) {
  ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(
    () => {
      let id = [];
      for (let i in list) id.push(list[i].id);
      delTenderOrder({ id }).then((res) => {
        ElMessage({ type: "success", message: res.info });
        getList();
      });
    }
  );
}

// 修改
let form = ref({
  show: false,
  list: {},
  rules: {
    money: [{ required: true, message: "请选择标书费用", trigger: "change" }],
    customer_type: [{ required: true, message: "请选择客户类型", trigger: "change" }],
    customer_name: [{ required: true, message: "请输入购买单位", trigger: "blur" }],
    customer_email: [{ required: true, message: "请输入Email地址", trigger: "blur" }],
    customer_unit: [{ required: true, message: "请输入联系人", trigger: "blur" }],
    customer_phone: [
      { required: true, message: "请输入手机号", trigger: "blur" },
      { pattern: /^1[0-9]{10}$/, message: "手机号码格式不正确", trigger: "blur" },
    ],
    business_license: [{ required: true, message: "请上传营业执照", trigger: "change" }],

    invoice_type: [{ required: true, message: "请选择发票种类", trigger: "change" }],
    taxpayer_identification_number: [{ required: true, message: "请输入纳税人识别号", trigger: "blur" }],
    invoice_address_phone: [{ required: true, message: "请输入地址、电话", trigger: "blur" }],
    invoice_bank_number: [{ required: true, message: "请输入开户行及账号", trigger: "blur" }],
  },
});
// 修改初始化
let editInit = (item) => {
  form.value.list = { ...item };
  form.value.show = true;
};
// 获取上传的营业执照
let getImagesList = (val) => {
  form.value.list.business_license = val[0].url;
};
// 提交修改
let formList = ref();
let handleForm = () => {
  formList.value.validate((valid, fields) => {
    if (valid) {
      let data = { ...form.value.list };
      handleTenderOrder(data).then((res) => {
        ElMessage({ type: "success", message: res.info });
        getList();
        form.value.show = false;
      });
    }
  });
};
// 清除表单
let closedForm = () => {
  form.value.list = {};
  formList.value.resetFields();
};

// 查看详情
let look = ref({
  show: false,
  list: {},
});
let initLook = (item) => {
  look.value.show = true;
  item.path = import.meta.env.VITE_DOWNLOAD + item.path;
  look.value.list = item;
};
// 中标开关
let changeWinBid = (item) => {
  if (item.win_bid == 1) {
    ElMessageBox.confirm("将发送中标短信通知, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" })
      .then(() => {
        let data = { ...item };
        handleTenderOrder(data).then((res) => {
          ElMessage({ type: "success", message: res.info });
          getList();
          // 发送中标短信
          sendWinBidSms({ id: item.id }).then((res) => {
            ElMessage({ type: "success", message: res.info });
          });
        });
      })
      .catch((res) => {
        item.win_bid = item.win_bid == 0 ? 1 : 0;
      });
  } else {
    let data = { ...item };
    handleTenderOrder(data).then((res) => {
      ElMessage({ type: "success", message: res.info });
      getList();
    });
  }
};
</script>
<style lang="scss" scoped>
.order {
  .search-handle {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    width: 100%;

    .search {
      .el-form-item {
        margin-bottom: 0px;
      }
    }
  }

  .list {
    padding: 0 15px;

    .el-link {
      margin-right: 10px;
    }

    .title {
      color: #409eff;
      cursor: pointer;

      &:hover {
        color: #79bbff;
      }
    }
  }

  .page {
    padding: 15px;

    .el-pagination {
      justify-content: flex-end;
    }
  }

  .preview {
    .title {
      text-align: center;
      font-size: 25px;
      margin-bottom: 30px;
      margin-top: -20px;
    }
  }
}
</style>